<template>
  <div class="basic-label-value">
    <div class="label">
      <slot name="label">
        {{ label }}
      </slot>
    </div>
    <div class="value">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { labelColorSymbol, labelWidthSymbol } from './types'

interface IProps {
  label?: string
  labelColor?: string
  labelWidth?: string
}

const props = withDefaults(defineProps<IProps>(), {
  labelColor: '#8A8E9A',
  labelWidth: '86px'
})

const labelColor = inject(labelColorSymbol, props.labelColor)
const labelWidth = inject(labelWidthSymbol, props.labelWidth)
</script>

<style scoped lang="scss">
.basic-label-value {
  @apply flex items-start gap-x-[16px] text-[14px];

  .label {
    @apply flex-shrink-0 leading-[20px];

    color: v-bind(labelColor);
    width: v-bind(labelWidth);
  }

  .value {
    @apply flex-1 min-h-[20px] leading-[20px] text-[#454954];
  }
}
</style>
